import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, message, Space, Tooltip, Row, Col, Checkbox, Radio } from 'antd';
import { connect, useIntl } from 'umi';
import IconFont from '@/components/Iconfont';
import ZoneSelect from '@/components/ZoneComponent';
import CateComp from '@/components/CategoryComponent';
import request from '@/utils/request';

const apiURL = '/api/services/app/Members/';
const UnionpayOption = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [record, setRecord] = useState<any>({});
  const formRef = useRef<any>(null);
  const intl = useIntl();
  useEffect(() => {
    const { record } = props;
    if (record) {
      getData(record.id);
    }
  }, [props.record]);

  const onFinish = async (values: any) => {
    setLoading(true);
    var act = 'Update';
    if (values.model.id == 0 || !values.model.id) {
      act = 'Create';
    }
    try {
      const resp = await request(`${apiURL}${act}`, {
        method: act=='Create'?'POST':'PUT',
        data: values.model,
      });
      if (resp.success) {
        message.success(intl.formatMessage({id:'pages.save.success'}));
        props.fetchDatas();
      }
    } catch (error) {
      console.log(error);      ;
    } finally {
      setLoading(false);
    }
  };

  const getData = async (id: number) => {
    setLoading(true);
    try {
      const resp = await request.get(`${apiURL}get`, {
        params: { id },
      });
      if (resp.success) {
        const result = resp.result;
        setRecord(result);
        formRef.current.setFieldsValue({ model: result });
      }
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  const onClose = () => {
    props.closeDraw();
  };

  return (
    <Form layout="vertical" ref={formRef} onFinish={onFinish}>
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Form.Item hidden name={['model', 'id']}>
            <Input />
          </Form.Item>
          <Form.Item hidden name={['model', 'avatar']}>
            <Input />
          </Form.Item>
          <Form.Item
            label={intl.formatMessage({id:'pages.memberName'})}
            name={['model', 'name']}
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={intl.formatMessage({id:'pages.userName'})}
            name={['model', 'userName']}
            rules={[{ required: true}]}
          >
            <Input />
          </Form.Item>
          <Form.Item label={intl.formatMessage({id:'pages.password'})} name={['model', 'password']}>
            <Input.Password />
          </Form.Item>
          <Form.Item label={intl.formatMessage({id:'pages.address'})} name={['model', 'address']}>
            <Input />
          </Form.Item>
          <Form.Item label={intl.formatMessage({id:'pages.cardNo'})} name={['model', 'cardNo']}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label={intl.formatMessage({id:'pages.mobile'})} name={['model', 'mobile']}>
            <Input />
          </Form.Item>
          <Form.Item label={intl.formatMessage({id:'pages.idNum'})} name={['model', 'idNum']}>
            <Input />
          </Form.Item>
          <CateComp
            layout="memberType"
            width={120}
            name={['model', 'memberType']}
            label={intl.formatMessage({id:'pages.memberType'})}
          />
          <Form.Item label={intl.formatMessage({id:'pages.sex'})} name={['model', 'sex']}>
            <Radio.Group>
              <Radio.Button value={intl.formatMessage({id:'pages.man'})}>{intl.formatMessage({id:'pages.man'})}</Radio.Button>
              <Radio.Button value={intl.formatMessage({id:'pages.female'})}>{intl.formatMessage({id:'pages.female'})}</Radio.Button>
            </Radio.Group>
          </Form.Item>

          <Form.Item label={intl.formatMessage({id:'pages.otherAttr'})} name={['model', 'inActive']} valuePropName="checked">
            <Checkbox>{intl.formatMessage({id:'pages.inActive'})}</Checkbox>
          </Form.Item>
        </Col>
      </Row>
      <ZoneSelect layout="Zone" width={100} label={intl.formatMessage({id:'pages.countryZone'})} name="model" />
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" loading={loading}>
          {intl.formatMessage({id:'pages.save'})}
          </Button>
          <Button onClick={onClose}>{intl.formatMessage({id:'pages.cancel'})}</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
}))(UnionpayOption);
